<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js" ></script>
</head>
<body>
<div id="app">
    app
   <my-counter></my-counter>
    <counter-a></counter-a>
</div>

<div id="app2">
    app2
    <my-counter></my-counter>
<!--    <counter-a></counter-a>-->
    <counter-b></counter-b>
</div>
<script>

    const MyCounter={

        data:function () {
            return {
                counter:0
            }
        },
        template:'<div>计数器：{{counter}} <button @click="addOpt">+</button> <button @click="subOpt">-</button> </div>'
        ,
        methods:{
            addOpt:function () {
                 this.counter++
            },
            subOpt:function () {
                this.counter--
            }
        }

    }

    //全局注册组件
    Vue.component('MyCounter',MyCounter)


    const  vm = new Vue(
        {
            el:"#app",
            data:{
                message:'Hello Vue!'
            },
            //局部注册写法
            components: {
                'counterA':MyCounter
            }
        }
    )

    const vm2 = new Vue({
        el:"#app2",
        components: {
            'counterB':MyCounter
        }


    })


</script>


</body>
</html>